<template>
    <div class="fenxiang">
        <el-row>
            <el-col :xs="1" :sm="1" :md="4" :lg="6" :xl="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :xs="22" :sm="22" :md="16" :lg="12" :xl="12">
                <div class="grid-content bg-purple-light">
                    <el-row>
                        <el-col :span="24">
                            <div class="grid-content bg-purple">
                                <el-row>
                                    <el-col :span="24">
                                        <div class="grid-content bg-purple">
                                            <el-row>
                                                <el-col :xs="6" :sm="5" :md="5" :lg="3" :xl="3">
                                                    <div class="grid-content bg-purple">
                                                        <div class="show-foot">
                                                            <a href>
                                                                <i class="el-icon-document-copy"></i>技术分享
                                                            </a>
                                                        </div>
                                                    </div>
                                                </el-col>
                                                <el-col :xs="2" :sm="6" :md="6" :lg="12" :xl="12">
                                                    <div class="grid-content bg-purple"></div>
                                                </el-col>
                                                <el-col :xs="6" :sm="6" :md="6" :lg="4" :xl="4">
                                                    <div class="grid-content bg-purple">
                                                        <div class="modal-wrap">
                                                            <a href>举报文章</a>
                                                        </div>
                                                    </div>
                                                </el-col>
                                                <el-col :xs="10" :sm="7" :md="7" :lg="5" :xl="5">
                                                    <div class="grid-content bg-purple">
                                                        <div class="copyright">
                                                            <el-popover
                                                                    placement="top"
                                                                    width="400px;"
                                                                    trigger="hover"
                                                                    content="转载请联系联系作者获得授权，并标注“简书作者”。"
                                                            >
                                                                <span slot="reference">© 著作权归作者所有</span>
                                                            </el-popover>

                                                        </div>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                            <div class="content-1">
                                                <div class="content-top">
                                                    <el-row type="flex" class="row-bg" justify="space-around">
                                                        <el-col :xs="1" :sm="1" :md="2" :lg="2" :xl="2">
                                                            <div class="grid-content bg-purple hidden-sm-and-down">
                                                                <a href>
                                                                    <img
                                                                            style="height: 47px;width: 47px;border-radius: 500px;border: 1px solid #e1e1e1;"
                                                                            src="../../assets/ContNavimg/1.jpg"
                                                                            alt
                                                                    >
                                                                </a>
                                                            </div>
                                                        </el-col>
                                                        <el-col :xs="16" :sm="16" :md="12" :lg="15" :xl="15">
                                                            <div class="grid-content bg-purple-light ">
                                                                <div class="info-1">
                                                                    <a href>千峰</a>
                                                                    <p>写了 975563 字，被 725 人关注，获得了 4104 个喜欢</p>
                                                                </div>
                                                            </div>
                                                        </el-col>
                                                        <el-col :xs="6" :sm="6" :md="8" :lg="5" :xl="5">
                                                            <div class="grid-content bg-purple">
                                                                <!--                              <el-button type="success" size="medium" round style="width:100%;">+关注</el-button>-->
                                                                <button class="guanzhuBtn"
                                                                        style="border-radius: 50px;cursor: pointer;margin-top: 10px;padding: 6px 20px 6px 20px;width: 98px;border:1px solid #42c02e;background-color: #f0f9eb;color:#42c02e"
                                                                        v-if="IsShows7" @click="changeCase">
                                                                    +关注
                                                                </button>
                                                                <div class="yiguanzhuBtn" v-else>
                                                                    <button style="border-radius: 50px;cursor: pointer;margin-top: 10px;padding: 6px 20px 6px 20px;width: 98px;border:1px solid #42c02e;background-color: #f0f9eb;color:#42c02e">
                                                                        <i class="el-icon-check"></i>已关注
                                                                    </button>
                                                                    <button class="qxguanzhuBtn" style="cursor: pointer"
                                                                            @click="changeCase">
                                                                        取消关注
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                </div>
                                                <div class="fengexian"
                                                     style="text-align: center; margin:0 auto; width:95%;">
                                                    <el-divider></el-divider>
                                                </div>
                                                <div class="qwe">千锋教育</div>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :xs="1" :sm="1" :md="4" :lg="6" :xl="6">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    import "element-ui/lib/theme-chalk/display.css";

    export default {
        data() {
            return {
                IsShows7: true
            }
        },
        methods: {
            changeCase() {
                this.IsShows7 = !this.IsShows7
            }
        }
    };
</script>

<style scoped>
    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple-light {
        height: 13px;
        /* background: #e5e9f2; */


    }

    .grid-content {
        border-radius: 4px;
        min-height: 1px;
    }

    .row-bg {
        padding: 10px 0;
        /* background-color: #f9fafc; */
    }

    .content-1 {
        margin-top: 20px;
        height: 147px;
        border: 1px solid #e1e1e1;
        border-radius: 4px;
        background-color: hsla(0, 0%, 71%, 0.1);
    }

    .content-1 .info {
        position: relative;
        top: 15px;
        margin-left: 24px;
        width: 95%;
        height: 47px;
    }

    .info-1 a {
        color: black;
        text-decoration: none;
    }

    .info-1 p {
        width: 80%;
        color: #969696;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .qwe {
        margin-top: -8px;
        padding-left: 12px;
        font-size: 12px;
        color: #969696;
    }

    .show-foot a {
        font-size: 12px;
        color: #c8c8c8;
        text-decoration: none;
    }

    .copyright {
        float: right;
        font-size: 12px;
        color: #c8c8c8;
        text-decoration: none;
    }

    .modal-wrap a {
        float: right;
        font-size: 12px;
        color: #c8c8c8;
        text-decoration: none;
    }

    .content-top {
        margin-top: 10px;
        /* border-bottom: 1px solid red; */
    }

    .guanzhuBtn:hover {
        background-color: #42c02e !important;
        color: #fff !important;
    }

    .yiguanzhuBtn {
        width: 98px;
        z-index: 55;
    }

    .qxguanzhuBtn {
        position: absolute;
        margin-top: -34px;
        border-radius: 50px;
        padding: 7px 20px 7px 20px;
        width: 98px;
        border: 1px solid #b3b3b3;
        background-color: #f0f9eb !important;
        color: #969696;
        display: none
    }

    .yiguanzhuBtn:hover .qxguanzhuBtn {
        display: block;
    }
</style>